<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <el-form :model="formInline" lable-width="200px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input v-model="formInline.tags" placeholder="请输入" style="width: 75%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="formInline.province" placeholder="请选择" @change="changeCity" style="width: 80%">
                <el-option
                  v-for="(province, i) in provinces"
                  :key="i"
                  :label="province"
                  :value="province"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区">
              <el-select v-model="formInline.city" placeholder="请选择" style="width: 80%">
                <el-option
                  v-for="(city, i) in citys"
                  :key="i"
                  :label="city"
                  :value="city"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input v-model="formInline.shortName" style="width: 80%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="状态"  style="margin-left: 30px;" >
              <el-select v-model="formInline.state" placeholder="请选择" style="width: 80%">
                <el-option :label="item.name" :value="item.value" v-for="item in states" :key="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="btn" >
              <el-button @click="clearStatus">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="text-align: right;padding-right: 10px;">
            <el-button type="success" @click="onAddRole">新增用户</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 新增公司弹窗 -->
      <el-dialog
        :title="companyEditTitle"
        :visible.sync="companyShow"
        @close="onRoleAddClose"
      >
        <el-form :model="companyFromData">
          <el-form-item label="企业名称" :label-width="formLabelWidth" required>
            <el-input v-model="companyFromData.shortName" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="所属公司" :label-width="formLabelWidth" required>
            <el-input v-model="companyFromData.company" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth" required>
            http://www.tianyancha.com(此处可查询所有公司全称及简称)
          </el-form-item>
          <el-form-item label="城市地区" :label-width="formLabelWidth" required>
            <el-select v-model="companyFromData.province" placeholder="请选择" @change="companyCity" style="width:39%">
              <el-option v-for="(province, i) in provinces" :key="i" :label="province" :value="province" />
            </el-select>
            <el-select v-model="companyFromData.city" collapse-tags style="margin-left: 14px; width:39% " placeholder="请选择">
              <el-option v-for="(city, i) in companyCitys" :key="i" :label="city" :value="city" />
            </el-select>
          </el-form-item>
          <el-form-item label="方向 (企业标签)" :label-width="formLabelWidth" required>
            <el-input v-model="companyFromData.tags" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth" required>
            <el-input type="textarea" :rows="2" placeholder="请输入" v-model="companyFromData.remarks" style="width:80%"/>
          </el-form-item>
        </el-form>
         <div class="dialog-footer">
          <el-button type="primary" @click="onRoleAddOk">确定</el-button>
          <el-button @click="onRoleAddClose">取消</el-button>
        </div>
      </el-dialog>
      <div class="counts"><i class="el-icon-info"></i> 共{{ companyList.data.counts}}条记录</div>

      <my-table
          :table-props="{
            data: companyList.data.items,
            border: false
          }"
          :columns="[
            { label: '序号', prop: 'id', width: 80, align: 'center' },
            { label: '企业编号', prop: 'number', width: 180, align: 'center' },
            { label: '企业简称', prop: 'shortName', align: 'center' },
            { label: '标签', prop: 'tags', align: 'center' },
            { label: '创建者', prop: 'creatorID', align: 'center' },
            { label: '创建日期', slotName: 'addDate', align: 'center' },
            { label: '备注', prop: 'remarks', align: 'center' },
            { label: '状态', slotName: 'state', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
          :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: companyList.data.counts
          }"
          :pagination-events="events"
        >
          <template v-slot:state="scope">
            {{ scope.row.state === 1 ? "启用" : "禁用" }}
          </template>
          <template v-slot:addDate="scope">
            {{ getTimeString(scope.row.addDate) }}
          </template>
          <template v-slot:operators="scope">
            <el-button type="success" size="small" @click="onEditCompany(scope.row)" circle plain><i class="el-icon-edit" /></el-button>

            <el-tooltip class="item" effect="dark" :content="scope.row.state == 1 ? '禁用' : '启用'" placement="top">
              <el-button :type="scope.row.state == 1 ? 'warning' : 'success'" size="small" @click="onChangeState(scope.row)" circle plain>
                <i :class="scope.row.state === 1 ? 'el-icon-close' : 'el-icon-check'" />
              </el-button>
            </el-tooltip>
            <el-button type="danger" size="small" @click="onDelClick(scope.row)" circle plain><i class="el-icon-delete" /></el-button>
          </template>
      </my-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { provinces, citys } from '@/api/hmmm/citys'
import * as companyApi from '@/api/hmmm/companys'
import { delModule } from '@/store/utils/delUtils'
import { getTimeString } from '@/utils/time'

export default {
  name: 'CompanysList',
  data() {
    return {
      getTimeString,
      currentPage: {
        page: 1,
        pagesize: 10
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      formInline: {
        tags: '',
        province: '',
        city: '',
        state: '',
        shortName: '',
      },
      companyFromData: {
        tags: '',
        province: '',
        city: '',
        state: '',
        shortName: '',
        remarks: ''
      },
      provinces: provinces(),
      citys: [],
      companyCitys: [],
      states: [
        {name:'启用', value: true},
        {name: '禁用', value: false}
      ],

      formLabelWidth: '120px',

      // 编辑
      companyShow: false,
      companyEditTitle: ""  // 标题名称  编辑  创建
      // 1  判断 companyEditTitle == 编辑 or 创建
      // 2  action = create or edit
    }
  },
  computed: {
    ...mapState('companys', ['companyList'])
  },
  methods: {
    ...mapActions('companys', ['updateCompanyList']),
    onCurrentPageChange(currentPage) {
      this.currentPage.page = currentPage
      this.updateCompanyList(this.currentPage)
    },
    onSearch() {
        this.updateCompanyList({
          ...this.currentPage,
          ...formInline
        })
    },
    clearStatus() {
      this.formInline = {}
    },
    changeCity() {
      // 1. 获取选择框的内容
      const content = this.formInline.province
      // 2. 调用函数，获取城区列表
      const pname = citys(content)
      // 3. 绑定
      this.citys = pname
      this.formInline.city = this.citys[0]
    },
    companyCity() {
      const data =  citys(this.companyFromData.province)
      this.companyCitys = data
      this.companyFromData.city = this.companyCitys[0]
    },
    // 新增用户弹窗
    onAddRole() {
      this.companyFromData = {city: ""}
      this.companyEditTitle = "创建公司"
      this.companyShow = true
    },
    // 关闭新增用户弹窗
    onRoleAddClose() {
      this.companyShow = false
    },
    // 确认新增 发请求
    async onRoleAddOk() {
      this.companyShow = false
      if (this.companyEditTitle === "创建公司"){
        await companyApi.add({
          isFamous: true,
          ...this.companyFromData
        })
      }else{
        await companyApi.update({
          ...this.companyFromData,
          isFamous: true
        })
      }
      this.updateCompanyList()
    },

    // 编辑公司
    onEditCompany(data) {
      this.companyEditTitle = "编辑公司"
      this.companyShow = true
      this.companyFromData = data
    },
    async onChangeState(data) {
      await companyApi.disabled({
        id: data.id,
        state: data.state == 0 ? 1 : 0
      })
      this.updateCompanyList(this.currentPage)
    },

    // 删除公司
    async onDelClick(data) {
      await delModule(companyApi.remove, '公司', {id: data.id})
      setTimeout(() => {
        this.updateCompanyList(this.currentPage)
      }, 100);
    }
  },
  created() {
    this.updateCompanyList(this.currentPage)
  }
}

</script>

<style lang="scss" scoped>
.box-card {
  margin: 16px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.counts {
  padding: 8px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  background-color: #f4f4f5;
  border-radius: 6px;
  color: #aaa;
}

</style>
